<div id="app" v-cloak>
    <el-scrollbar style="height: calc(100vh - 100px)">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="名称" prop="title">
                <el-input v-model="form.title" style="width: 360px" placeholder="请输入名称(中文)" />
            </el-form-item>
            <el-form-item label="规则" prop="name">
                <el-input v-model="form.name" style="width: 360px" placeholder="请输入规则(英文),不可重复" />
            </el-form-item>
            <el-form-item label="图标" >
                <mu-icon v-model="form.icon"></mu-icon>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select
                        v-model="form.type"
                        clearable
                        placeholder="请选择类型"
                        style="width: 360px"
                >
                    <el-option
                            v-for="item in options.typeList"
                            :key="item.value"
                            :label="item.title"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上级" prop="pid">
                <mu-tree-select :options="options.pidList" label-field="title" value-field="id" v-model="form.pid"></mu-tree-select>
            </el-form-item>
            <el-form-item label="插件" prop="plugin">
                <el-select
                        v-model="form.plugin"
                        clearable
                        placeholder="请选择插件"
                        style="width: 360px"
                        @change="event=>handleSelectChange(event,`plugin`)"
                >
                    <el-option
                            v-for="item in options.pluginList"
                            :key="item.key"
                            :label="item.title"
                            :value="item.key"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模块" prop="module">
                <el-select
                        v-model="form.module"
                        clearable
                        placeholder="请选择模块"
                        style="width: 360px"
                >
                    <el-option
                            v-for="item in options.moduleList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.type==`file`" label="路由" prop="route">
                <el-input v-model="form.route" style="width: 360px" placeholder="请输入路由规则" />
            </el-form-item>
            <el-form-item v-else label="路由" >
                <el-input v-model="form.route" style="width: 360px" placeholder="请输入路由规则" />
            </el-form-item>
            <el-form-item label="描述" >
                <el-input type="textarea" v-model="form.remark" style="width: 360px"  rows="5"  placeholder="请输入描述"/>
            </el-form-item>
            <el-form-item label="权重" >
                <el-input  v-model="form.weigh" style="width: 360px" placeholder="请输入权重"/>
            </el-form-item>
            <el-form-item label="是否菜单" prop="ismenu">
                <el-switch
                        v-model="form.ismenu"
                        :active-value="1"
                        :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch
                        v-model="form.status"
                        :active-value="1"
                        :inactive-value="0">
                </el-switch>
            </el-form-item>
        </el-form>
    </el-scrollbar>
    <div style="display: flex;justify-content: flex-end;margin-top: 20px" class="flex-column flex-item-center">
        <div >
            <el-button type="primary" @click="onSubmitAdd">立即创建</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</div>